<style lang="scss" scoped>
@import '@/assets/css/variable';
.courseContainer{
	width: 100%;
	background-color: $bgw;
	min-height: 100%;
	font-size: 1.2rem;
	overflow-y: scroll;
	box-sizing: border-box;
	
	background-color: #fff;
	padding: 0 10px;
	// 搜索框
    .box-search {
	  display: flex;
    width: 100%;
	  height: 62px;
	  margin-bottom: 12px;
	  background: #fff;
    .search {
      flex: 1;
    }
	  .search-screening {
		  display: flex;
		  align-items: center;
		  img {
            margin: 0 4px;
		  }
		  .search-text {
        color: #707070;
			  font-size: 14px;
		  }
	  }
	}


	.pics{
	   margin-bottom: 12px;
	  .pic-image {
		position: relative;
		border-radius: 5px;
		overflow: hidden;
        width: 100%;
		height: 175px;
		background: #223354;
		margin-bottom: 10px;
		img{
		 width:100%;
		 height: 100%;
		}
		.pic-box-text{
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 15px;
			position: absolute;
			background-color: #646a72;
			width: 100%;
			height: 60px;
			background: rgba(34, 36, 38, 0.5);
			bottom: 0;
			left: 0;
			right: 0;
			.text-title {
              font-size: 16px;
			  color: #ffffff;
			}
			.text-list {
              margin-top: 8px;
              font-size: 12px;
			  color: #d0d0ce;
			  .text-center {
				  margin-right: 8px;
			  }
			}
		}
	  }
	}

  .popup {
	// display: flex;
	// flex-direction: column;  
    // width: 100%;
    // height: 100%;
    .city-text {
      display: flex;
      height: 44px;
	  line-height: 44px;
      padding-left: 12px;
      border-bottom: 1px solid #f5f7fa;
	  font-size: 14px;
      
    }

	.city-area {
		display: flex;
		justify-content: center;
		align-items: center;
        .city-child1 {
          flex: 1;
		  height: 20px;
		  span {
			 display: block;
			 width: 100%;
			 margin: 14px;
		  }
		}

		.city-child2{
          flex: 4;
		  height: 20px;
		  span {
			 display: block;
			 width: 100%;
			 margin: 14px;
		  }
		}
	  }
    
  }
	

  .active {
    color: #6ea3f6;
  }
}


</style>

<template>
	<div class="courseContainer">
        <!-- <bar-nav @getBack="getBack" @backHome="backHome" :title="title"></bar-nav> -->
        <div>

        <div class="box-search">
          <div class="search">
            <search-box @searchEvent="seerchClick"></search-box>
          </div>
          
          <div class="search-screening">
            <img src="../../assets/img/screening.png" alt="">
            <span class="search-text" @click="handlerScreen">筛选</span>
           </div>
          </div>
        </div>
		<van-popup v-model="screeningPopup" round position="bottom" :style="{ height: '40%' }" @click-overlay = "overlay">
			<div class="popup">
				<div class="city-text">
					<span :class="{active: indexs == 0}" style="{margin-left: 20px;}">选择区县</span>
					<span :class="{active: indexs == 1}">/选择街道</span>
					<!-- <span :class="{active: indexs == 2}">/选择社区</span>
					<span :class="{active: indexs == 3}">/选择小区</span> -->
				</div>
<!--  -->
				<div class="city-area" >
					<div class="city-child1" >
						<span class="firsttive" :class="{active: n == i}" v-for="(item, i) in options" :key="i"  @click="areaClick(i, '0')">{{item.text}}</span>
					</div>
					
					<div class="city-child2">
						<span class="firsttive" :class="{active: n1 == i}" @click="streetClick(item.value, '1', i)" v-for="(item, i) in streetList" :key="i" >{{item.text}}</span>
					</div>
					<!-- <div class="city-child">
						<span class="firsttive" @click="communityClick(item, '2')" v-for="(item, i) in community" :key="i"  >{{item}}</span>
					</div>
					<div class="city-child">
						<span class="firsttive" @click="housingClick(item, '3')" v-for="(item, i) in housing" :key="i">{{ item.text }}</span>
					</div> -->
                </div>
            </div>
      
		</van-popup>

		<div class="pics">
			<div class="pic-image" v-for="(item, i) in successList" :key="i" @click="successClick(item)"  >
               <img :src="item.img" alt="">
			   <div class="pic-box-text">
                 <div class="text-title">{{StickTitle(item.title)}}</div>
				 <div class="text-list">
					 <span class="text-center">{{item.areaStr}} {{item.communityName}}</span>
					 <span>{{item.createTime}}</span>
				 </div>
			   </div>
			</div>
		</div>

		
		
	</div>
</template>

<script>
// import {Dialog,Toast} from 'vant';
import { Popup } from 'vant';
import {myMixins} from "@/assets/js/mixins.js"
import SearchBox from './../../components/SearchBox'
import BarNav from '@/components/BarNav'
import { cloneLoop } from '@/utils/clone'



export default {
	mixins: [myMixins],
	name: 'course',
	data() {
		return {
		  screeningPopup: false	,
          title: '成功案例',
          successList: [],
		  // 总数据源
		  options: [],
		  // 街道
		  streetList: [],
		  // 社区
          community: [],
		  // 小区
		  // housing: [],
		  // 索引
		  indexs: '',
		  n: 0, 
		  n1: 0,
		  pageNo: 1,
          pageSize: 10,

		}
	},
	components: {
	  SearchBox,
    BarNav
	},
	created() {
      this.dataList()

	},
    computed: {
    StickTitle() {
      return function(value) {
        let reg=/<\/?.+?\/?>/g;
        return value.replace(reg, '')
      }
    }
    },
	watch: {
	  	
	},
	mounted() {
	},
	methods: {
    // 区
    areaClick(value, i) {
	  this.indexs = i
	  this.n = value
	  this.streetList = this.options[value].children
	//   console.log(value, this.streetList);
	},
    // 街道
	streetClick(value, i, is) {
    console.log(value);
	  this.indexs = i
	  this.n1 = is
    this.screeningPopup =false
    this.$request.CasesList({
		params: {
		  pageNo: this.pageNo,
		  pageSize: this.pageSize,
		  areaCode: '001414'
		}}).then(res => {
			console.log(res);
	 let successList = cloneLoop(res.result.records)
     console.log(successList === res.result)
		 successList.map(item => {
			// 拼接地址
			item.img = this.$request.url(item.imgUrl[0])
            return item.img
		 })
		 console.log(this.successList);
         this.successList = successList
		 if(this.successList.length == 0) {
            this.$toast('无优秀案例，请重新筛选')
		 }
		})  
	},
    // 搜索
    seerchClick(value) {
		console.log(value);
       this.$request.CasesList({
		params: {
		  pageNo: this.pageNo,
		  pageSize: this.pageSize,
		  strWhere: value,
		  areaCode: '0014'
		}}).then(res => {
	     let successList = cloneLoop(res.result.records)
         console.log(successList === res.result)
		 successList.map(item => {
			// 拼接地址
			item.img = this.$request.url(item.imgUrl[0])
            return item.img
		 })
		 console.log(this.successList);
         this.successList = successList
		 if(this.successList.length == 0) {
            this.$toast('无优秀案例，请重新筛选')
		 }
		}) 
	},

	successClick(value) {
      this.$router.push('/infoDetail')
	  this.$store.commit('setInfoback', value)
	},

	// 社区
	// communityClick(value, i) {
	//   this.indexs = i
	//   this.$request.GetVillage({params: {
	// 	communityName: value
	// 	}}).then(res => {
  //       //  console.log(res.result);
	// 	  res.result.forEach(item => {
	// 		 this.housing = []
	// 		 let newData={};
  //            newData.text=item.name;
  //            newData.value=item.id;
	// 		 this.housing.push(newData)
			 
	// 	 })
  //       //   console.log(this.housing);
	// 	  })
	// },
	// 小区
	// housingClick(value, i) {
  //     this.indexs = i
	//   this.$request.CasesList({params: {
	// 	id: value.id
	// 	}}).then(res => {
	// 	  if(res.code != 200) return
	// 	   let successList = res.result.records
  //          successList.forEach(item => {
	// 		  item.img = this.$request.url(item.imgUrl[0])
	// 		  return item.img
	// 	   });
	// 	   this.successList = successList
	// 	   this.streetList = []
	// 	   this.screeningPopup =false
	// 	   this.indexs = 0
	// 	   this.community = []
	// 	   this.housing = []
	// 	   this.$toast('筛选成功！')
	//   })
	// },
	// 关闭遮罩层
	overlay() {
	  this.indexs = 0
	  this.streetList = []
	  this.community = []
	  // this.housing = []
	},

    // 获取优秀案例数据
    dataList() {
      this.$request.CasesList({
		  params: {
		  pageNo: this.pageNo,
		  pageSize: this.pageSize,
		  areaCode: '0014'
		}}
	  ).then(res => {
		  if(res.code != 200) return
		  console.log(res, 'res.result.records');
		   let successList = res.result.records
           successList.forEach(item => {
			  item.img = this.$request.url(item.imgUrl[0])
			  return item.img
		   });
		   this.successList = successList
		   this.streetList = []
	  })
	  },

    // 获取街道数据
	  handlerScreen() {
      this.screeningPopup = true
	  this.$request.AreaPtree().then(res => {
		  if(res.code != 200) return
		//   console.log(res);
		  this.options = this.eachReplaceKey(res.result)
        //   console.log(this.options, 'this.options');
	  })
    },
    // 递归循环数据展示s
    eachReplaceKey(data) {
    console.log(data, 33333);
        let item=[];
        data.map((list)=>{
            let newData={};
            newData.text=list.name;
            newData.value=list.code;
            newData.children=list.children;
            if(list.children){
              newData.children = this.eachReplaceKey(list.children)
            }
            item.push(newData);
        })
        return item;
        }, 
		
		
	},
	}

</script>